<template>
	<view>
		<!-- <u-navbar title="订单详情" autoBack placeholder></u-navbar> -->
		<orderTop :item="dataInfo" @refresh="refresh"></orderTop>
		<!-- 待评价、待发货与待收货状态时显示 -->
		<view v-if="dataInfo.status===1" class="flex justify-center text-light9 font-small mb-2">
		    <u-count-down
		        :time="time"
		        format="DD:HH:mm"
		        autoStart
		        @change="onChange"
				@finish="onFinish(dataInfo.status)"
		    >
		        <view class="time">
		    		还剩
		            <text class="time__item ml-1">{{ timeData.days }}&nbsp;天</text>
		            <text class="time__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}&nbsp;时</text>
		            <text class="time__item mr-1">{{ timeData.minutes }}&nbsp;分</text>
		    		自动取消
		        </view>
		    </u-count-down>
		</view>
		<view class="px-2 mb-2" style="border-radius: 12rpx;">
			<commonPath :item="dataInfo" typeStype="order"></commonPath>
		</view>
	
		<view class="bg-white p-2 mx-2" style="border-radius: 12rpx;" v-for="(goodsItem,goodsIndex) in dataInfo.goods_order" :key="goodsIndex">
			<orderItem :item="goodsItem" type="order" :color="'#666666'" @click=""></orderItem>
		</view>
		<view class="bg-white p-2 flex align-center justify-between mt-2 mx-2" style="border-top-left-radius: 12rpx;border-top-right-radius: 12rpx;">
			<view class="text-main font-28 textColor">商品总价</view>
			<view class="text-main font-28 priceColor">¥{{dataInfo.total_price}}</view>
		</view>
		
		<view class="bg-white p-2 flex align-center justify-between mx-2 border-bottom">
			<view class="text-main font-28 textColor">运费</view>
			<view class="text-main font-28 priceColor">¥{{dataInfo.express_price}}</view>
		</view>
		
		<view class="bg-white p-2 flex align-center justify-end mx-2 " style="border-bottom-left-radius: 12rpx;border-bottom-right-radius: 12rpx;">
			<view class="text-main font-28 ">应付款：</view>
			<commonPrice :price="dataInfo.pay_price"></commonPrice>
			<!-- <view class="text-light9 font-28 ">{{dataInfo.pay_price}}</view> -->
		</view>
		
		<view class="bg-white p-2 flex align-center justify-between mx-2 mt-2 brStyle">
			<view class="font-weight-bold">订单详情</view>
		</view>
		
		<view class="bg-white p-2 flex align-center justify-between mx-2 ">
			<view class="text-main font-28 textColor">备注</view>
			<view class="text-main font-28 ">{{dataInfo.remarks?dataInfo.remarks:'无'}}</view>
		</view>
		
		<view class="bg-white p-2 flex align-center justify-between mx-2">
			<view class="text-main font-28 textColor">订单编号:</view>
			<view class="text-main font-28 ">{{dataInfo.order_no}}</view>
		</view>
		
		<view class="bg-white p-2 flex align-center justify-between mx-2">
			<view class="text-main font-28 textColor">创建时间:</view>
			<view class="text-main font-28 ">{{dataInfo.createtime}}</view>
		</view>
		
		<view v-if="(dataInfo.status===2||dataInfo.status===3||dataInfo.status===4||dataInfo.status===5)"  class="bg-white brStyle p-2 flex align-center justify-between mx-2" >
			<view class="text-main font-28 textColor">支付时间:</view>
			<view class="text-main font-28 ">{{dataInfo.pay_time}}</view>
		</view>
		<view v-if="(dataInfo.status===2||dataInfo.status===3||dataInfo.status===4||dataInfo.status===5)"  class="bg-white brStyle p-2 flex align-center justify-between mx-2" >
			<view class="text-main font-28 textColor">支付方式:</view>
			<view class="text-main font-28 ">{{dataInfo.pay_way === '1'? '微信支付' : dataInfo.pay_way === '2' ? '支付宝' : '微信支付' }}</view>
		</view>
	
		<view class="" style="height: 200rpx;"></view>
		
		<view class="fixed-bottom bg-white pr-2">
			<orderButton :item="dataInfo" @refresh="refresh" :type="type"></orderButton>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataInfo:{},
				logistics:'',
				orderId:'',
				timeData: {}, // 倒计时展示数据
				countDownTime: 0 ,// 倒计时
				time: 0,
				type: ''
			}
		},
		onLoad(e) {
			this.orderId = e.orderId
			this.getDetail(e.orderId)
			this.type = e.type
		},
		methods: {
			refresh(){
				this.getDetail(this.orderId)
			},
			getDetail(ID){
				this.$api.orderDetail({
					order_id:ID
				}).then(res=>{
					if(res.code === 1){
						this.dataInfo = res.data
						if (this.dataInfo.status===1) {
							// 取消
							this.countDownTime = 30
							this.time = +new Date(this.dataInfo.createtime) + (this.countDownTime * 60 * 1000) - +new Date()
						}
					}
				})
				if(this.dataInfo.logistics==='2'){
					this.$api.logistics({
						id:ID
					}).then(res=>{
						if(res.code === 1){
							
							if(res.data.data){
								this.logistics = res.data.data[0].context
							}
							
						}
					})
				}
				
			},
			onChange(e) {
			    this.timeData = e
			},
			onFinish(status) {
				if (status===1) {
					// 取消
					this.$api.cancelOrder({
						order_id:this.dataInfo.id
					})
				} else {
					// 收货
					this.$api.confirmOrder({
						order_id:this.dataInfo.id
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
  .brStyle {
	  border-top-left-radius: 12rpx;
	  border-top-right-radius: 12rpx;
  }
  .textColor {
	  color: #939393;
  }
  .priceColor {
	  color: #da1511;
  }
  .time {
      @include flex;
      align-items: center;
  
      &__item {
           color: #da2628;
           font-size: 12px;
           text-align: center;
       }
  }
</style>
